技術問答
技術文章
iT 徵才
Tag
聊天室
2025 鐵人賽
登入/註冊
問答
文章
Tag
邦友
鐵人賽
搜尋
2018 iT 邦幫忙鐵人賽
DAY
3
1
自我挑戰組
網頁學習日誌
系列 第
3
篇
CSS : display屬性-區塊和行內元素差異
2018鐵人賽
yuski
2017-12-06 14:21:14
8979 瀏覽
分享至
diplay區塊和行內屬性表格分析:
block(區塊元素)
inline(行內元素)
inline-block
差異
將整行容器空間占滿,所以會分行排列
與文字段落同行排列
效果同於float,同時具有block(區塊)和inline(行內)屬性
影響範圍
整行都可以點到
元素範圍以外點不到
元素範圍以外點不到
使用地方
使用手機點選按鈕、選單等需大範圍感應區域的元素
a連結
元素並排
block: 區塊將整行空間占滿,後面元素往下行排
inline:同行排列
display屬性 最常用在 ul li 清單項目,ul li預設都為block所以都會分行排列
所以如果要讓li並排,只要設定li為display:inline 或是 inline-block,ul 和 li都可在同行顯示,但是ul仍然還是區塊元素(block)。
留言
追蹤
檢舉
上一篇
CSS : position 絕對定位與相對定位
下一篇
CSS : 網頁排版要注意的Box Model(盒模型)
系列文
網頁學習日誌
共
30
篇
目錄
RSS系列文
訂閱系列文
68
人訂閱
26
API : Google Maps API 設定(2)地圖標記
27
API : Google Maps API 設定(3)新增多個標記
28
API : Google Maps API 設定(4) js+json 標記 wifi 熱點
29
Flex:春聯
30
Flex : Bootstrap 4 Flex 網格
完整目錄
熱門推薦
{{ item.subject }}
{{ item.channelVendor }}
|
{{ item.webinarstarted }}
|
{{ formatDate(item.duration) }}
直播中
立即報名
尚未有邦友留言
立即登入留言
iThome鐵人賽
參賽組數
398
組
團體組數
13
組
累計文章數
2823
篇
最後報名日
9/15
看影片追技術
看更多
{{ item.subject }}
{{ item.channelVendor }}
|
{{ formatDate(item.duration) }}
直播中
熱門tag
看更多
15th鐵人賽
16th鐵人賽
13th鐵人賽
14th鐵人賽
12th鐵人賽
11th鐵人賽
鐵人賽
2019鐵人賽
javascript
2018鐵人賽
python
2017鐵人賽
17th鐵人賽
windows
php
c#
windows server
linux
css
react
熱門問題
不知道網路紅隊的要去那加公司
更換FW後Public IP service無法使用
鼎新ERP欄位可修改預設值嗎
Ansible 連線主機的 port 不是 22 遇到的問題
備份映像檔
Outlook 寄件備份消失問題 (已解決)
請問有人遇過在lightsail上部屬fastapi失敗的案例?
aws ec2 檢查故障問題
IIS 管理員 連線功能不見
熱門回答
鼎新ERP欄位可修改預設值嗎
不知道網路紅隊的要去那加公司
Ansible 連線主機的 port 不是 22 遇到的問題
更換FW後Public IP service無法使用
備份映像檔
熱門文章
什麼是 Signal ?
第10天,No-Code 快速上線又省錢 / 原汁排骨湯 台北最好喝的排骨湯(台北萬華)| 30天滷肉飯
序: AI 加速編碼後,你該學什麼?
第11天,LibreOffice 更省錢 / 司機俱樂部 宵夜好選擇(台北松山)| 30天滷肉飯
第12天,即時通訊軟體選擇 / 金峰滷肉飯 台北名店(台北中正)| 30天滷肉飯
IT邦幫忙
×
標記使用者
輸入對方的帳號或暱稱
Loading
找不到結果。
標記
{{ result.label }}
{{ result.account }}